<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>沐芃科技</title>
    <link rel="stylesheet" href="../../css/news.css">
    <style>
        #sign .table {
            /* margin: 10px; */
            text-align: center;
            border: 1px solid #eee;
            width: 100%;
        }

        #sign .table tr {
            border-bottom: 1px solid #eee;
        }

        #sign .table th {
            width: calc(((100vw - 20px) - 8px) / 7);
            padding: 10px 0;
            text-align: center;
            border-bottom: 0;
        }

        #sign .table td {
            padding: 20px 0;
        }

        #sign .table td.active {
            background-image: url('../../image/sign1.png');
            background-size: 30px 30px;
            background-position: center;
            background-repeat: no-repeat;
        }

        #sign .tip-wrap {
            line-height: 25px;
            color: #757575;
            font-size: 14px;
        }

        #sign .new-submit {
            width: calc(100% - 20px);
            line-height: 40px;
            background: #673AB7;
            color: #ffffff;
            text-align: center;
            border-radius: 5px;
            font-size: 14px;
            margin: 10px;
        }

        #sign .new-submit.ready {
            background: #aaa;
        }
    </style>
</head>

<body>

    <div id="view" v-cloak>
        <div class="wrap" id="sign">
            <table class="table">
                <thead>
                    <tr>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td class="active">1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                    </tr> -->
                    <tr v-for="(m, index) in ffList">
                        <td v-for="(c, cindex) in m" :class="{'active': ffInfo[c]}">{{c}} </td>
                    </tr>
                </tbody>
            </table>
            <div class="tip-wrap new-padding-10">
                <h3 style="margin: 15px 0;">签到规则</h3>
                <div class="sign-content" v-html="signText"></div>
                <!-- <p>1、连续签到7天，每日领取1，4，8，13，19，26，34积分</p>
                <p>2、一旦断签，重新计算积分</p> -->
            </div>
            <button class="new-submit ready" v-if="ffInfo[nowDay]">已签到</button>
            <button class="new-submit" v-else tapmode onclick="submit()">签到</button>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            ffInfo: {},
            ffList: [],
            nowDay: '',
            sys_time: 0, // 系统时间
            signText: '', // 签到规则
        }
    })
    apiready = function () {
        getHistory();

        getPageContent(10, function (data) {
            view.signText = data.body;
        })
    }


    // 获取签到记录
    function getHistory() {
        _ajax('api/task/qiandaorecords', function (ret, err) {
            if (ret && ret.data) {
                ret = ret.data;
                view.sys_time = ret.current_time;
                getDay(function () {
                    var obj = {};
                    for (var i = 0, len = ret.data.length; i < len; i++) {
                        obj[ret.data[i]] = 1;
                    }
                    view.ffInfo = obj;
                })
            } else {
                _msg('系统错误');
            }
        }, {
            user_id: $api.getStorage('userid')
        })
    }

    // 获取当月日数 注意使用/ 因IOS无法识别-
    function getDay(callback) {
        var nowDate = new Date(view.sys_time * 1000);

        var year = nowDate.getFullYear();
        var month = parseInt(nowDate.getMonth()) + 1;

        var nowDay = nowDate.getDate();

        var first = year + '/' + month + '/01'; // 本月第一天
        var firstDay = new Date(first).getDay(); // 周几

        // 如果当月是12月 则增加年份 否则增加月份
        if (month == 12) {
            var nextMonDay = (parseInt(year) + 1) + '/01/01'; // 下个月第一天
        } else {
            var nextMonDay = year + '/' + (parseInt(month) + 1) + '/01'; // 下个月第一天
        }

        var last = new Date(nextMonDay).getTime() - 24 * 60 * 60 * 1000; // 最后一天的时间戳
        var lastDay = new Date(last).getDate(); // 天数

        var arr = [];
        for (var i = 0; i < firstDay; i++) {
            arr.push(' ');
        }
        for (var i = 0; i < lastDay; i++) {
            arr.push(i + 1);
        }
        if (!(firstDay == 0 && lastDay == 28)) {
            while (arr.length < 35) {
                arr.push(' ');
            }
        }
        var brr = [];
        while (arr.length > 0) {
            brr.push(arr.splice(0, 7));
        }
        view.ffList = brr;
        view.nowDay = nowDay;
        if (typeof callback == 'function') {
            callback();
        }
    }

    // 签到
    function submit() {
        _alert('确定进行签到？', function () {
            _loading();
            _ajax('api/task/qiandaoAjax', function (ret, err) {
                _loadingClose();

                _alert(ret.msg, function () {
                    if (ret.code == 200) {
                        console.log(view.nowDay);
                        view.ffInfo[view.nowDay] = 1;
                        view.$forceUpdate();
                    }
                });
            }, {
                user_id: $api.getStorage('userid')
            })
        })
    }
</script>
</html>